<template>
	<view class="content">
		<view class="bg-view"></view>
		<!-- 产品基本信息 -->
		<view class="info-cont">
			<view class="inner">
				<view class="head">
					<view class="left">
						<image class="img" src="../../../static/images/icon_product_gray.png" mode="aspectFill"></image>
						<text class="text">{{item.name}}</text>
					</view>
				</view>
				<view class="msg-box">
					<view class="left">
						<view class="item">
							<text class="text">产品单价：{{item.price}}</text>
						</view>
						<view class="item">
							<text class="text">产品单位：{{item.unit}}</text>
						</view>
						<view class="item">
							<text class="text">产品类型：{{item.cateName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 基本信息 -->
		<essent-info ref="productInfo"></essent-info>
	</view>
</template>

<script>

	import api from '@/api/api.js';
	import essentInfo from './proEssentInfo.vue'
	export default {
		components:{
			essentInfo, // 基本信息
		},
		data() {
			return {
				productId:undefined,
				item:{
					name:'',
					price:'',
					unit:'',
					cateName:'',
					
				},
			}
		},
		onLoad(options) {
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.productId = options.productId;
			this.getProductDetails();
		},
		methods: {
			getProductDetails(){
				var data = {productId:this.productId};
				var that=this;
				api.getProductDetails(data).then(
					res => {
						if(res.code==200){
							that.item=res.product;
							that.$refs.productInfo.getProduct(this.item);
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
							 
						}
					},
					rej => {}
				);
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 20upx 0;
		position: relative;
		.bg-view{
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 100%;
			height: 160upx;
			background: #39b54a;
		}
		.info-cont{
			padding: 0 50upx;
			margin-bottom: 30upx;
			.inner{
				padding: 30upx;
				background: #fff;
				border-radius: 10upx;
				.head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						.img{
							width: 50upx;
							height: 50upx;
							margin-right: 20upx;
						}
						.text{
							font-size: 32upx;
							color: #000;
						}
					}
					.btn-box{
						.deal-btn{
							width: 100upx;
							text-align: center;
							padding: 10upx 0;
							font-size: 24upx;
							border-radius: 4upx;
							&.deal{
								background: #0aAC44;
								color: #fff;
							}
							&.un-deal{
								background: #EFEFEF;
								color: #BDBDBD;
							}
						}
					}
				}
				.msg-box{
					display: flex;
					justify-content: space-between;
					margin-top: 10upx;
					.left{
						.item{
							display: flex;
							align-items: center;
							margin-top: 20upx;
							.img{
								width: 30upx;
								height: 30upx;
								margin-right: 10upx;
							}
							.text{
								font-size: 30upx;
								color: #333;
							}
						}
					}
					.right{
						width: 80upx;
						height: 80upx;
						align-self: flex-end;
					}
				}
			}
		}
	}
</style>
